<template>
  <div class="user-dashboard">
    <el-row :gutter="20">
      <!-- 欢迎卡片 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="welcome-card">
          <div class="welcome-content">
            <div class="welcome-info">
              <h2>您好，{{ userInfo.real_name || userInfo.username }}</h2>
              <p>欢迎使用小区智慧停车场管理系统</p>
              <div class="welcome-actions">
                <el-button type="primary" @click="$router.push('/user/parking')">查看停车场</el-button>
                <el-button @click="$router.push('/user/reservation')">预约车位</el-button>
              </div>
            </div>
            <div class="welcome-image">
              <img src="/smart-parking.svg" alt="停车场图标" />
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 停车场概览 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="stats-card">
          <template #header>
            <div class="card-header">
              <span>停车场概览</span>
              <el-tooltip content="数据刷新时间: 10分钟前" placement="top">
                <el-icon><InfoFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <div class="parking-stats">
            <div class="stat-item">
              <div class="stat-value">{{ parkingStats.totalSpaces }}</div>
              <div class="stat-label">总车位</div>
            </div>
            <div class="stat-item">
              <div class="stat-value available">{{ parkingStats.availableSpaces }}</div>
              <div class="stat-label">可用车位</div>
            </div>
            <div class="stat-item">
              <div class="stat-value used">{{ parkingStats.usedSpaces }}</div>
              <div class="stat-label">已用车位</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ parkingStats.occupancyRate }}%</div>
              <div class="stat-label">占用率</div>
            </div>
          </div>
          <div class="chart-container">
            <div ref="parkingChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 公告信息 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="notice-card">
          <template #header>
            <div class="card-header">
              <span>最新公告</span>
              <el-button @click="$router.push('/user/announcement')" link>查看更多</el-button>
            </div>
          </template>
          <div class="notice-list">
            <div v-for="(notice, index) in notices" :key="index" class="notice-item">
              <div class="notice-title">
                <el-icon><Bell /></el-icon>
                <span>{{ notice.title }}</span>
                <el-tag v-if="notice.isTop" size="small" type="danger">置顶</el-tag>
              </div>
              <div class="notice-content">{{ notice.content }}</div>
              <div class="notice-footer">
                <span class="notice-time">{{ notice.time }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 我的车辆 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="vehicle-card">
          <template #header>
            <div class="card-header">
              <span>我的车辆</span>
              <el-button @click="$router.push('/user/profile')" link>管理车辆</el-button>
            </div>
          </template>
          <div class="vehicle-list">
            <div v-for="(vehicle, index) in vehicles" :key="index" class="vehicle-item">
              <div class="vehicle-info">
                <div class="vehicle-plate">{{ vehicle.plateNumber }}</div>
                <div class="vehicle-details">
                  <span>{{ vehicle.brand }} {{ vehicle.model }}</span>
                  <span class="vehicle-color">{{ vehicle.color }}</span>
                </div>
              </div>
              <div class="vehicle-status">
                <el-tag :type="vehicle.status === '在场内' ? 'success' : 'info'">
                  {{ vehicle.status }}
                </el-tag>
              </div>
            </div>
            <div v-if="vehicles.length === 0" class="empty-data">
              暂无车辆信息，请先添加车辆
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 最近停车记录 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="record-card">
          <template #header>
            <div class="card-header">
              <span>最近停车记录</span>
              <el-button @click="$router.push('/user/record')" link>查看更多</el-button>
            </div>
          </template>
          <div class="record-list">
            <el-table :data="parkingRecords" style="width: 100%">
              <el-table-column prop="plateNumber" label="车牌号" width="100" />
              <el-table-column prop="entryTime" label="入场时间" width="160" />
              <el-table-column prop="exitTime" label="出场时间" width="160" />
              <el-table-column prop="duration" label="停车时长" />
              <el-table-column prop="fee" label="费用" />
            </el-table>
            <div v-if="parkingRecords.length === 0" class="empty-data">
              暂无停车记录
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import * as echarts from 'echarts/core'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册echarts组件
echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer])

// 获取用户信息
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo || {})

// 停车场图表DOM引用
const parkingChartRef = ref(null)

// 模拟数据 - 停车场统计
const parkingStats = reactive({
  totalSpaces: 200,
  availableSpaces: 78,
  usedSpaces: 122,
  occupancyRate: 61
})

// 模拟数据 - 公告
const notices = [
  {
    title: '停车场A区维修通知',
    content: '因停车场A区进行设备维护，将于本周六临时关闭，请提前安排好您的车辆停放位置。',
    time: '2025-05-10 09:30',
    isTop: true
  },
  {
    title: '电子支付优惠活动',
    content: '即日起至月底，使用微信或支付宝支付停车费享受9折优惠，欢迎使用。',
    time: '2025-05-08 14:15',
    isTop: false
  },
  {
    title: '系统升级公告',
    content: '系统将于本周五凌晨2点-4点进行升级维护，期间可能影响部分功能使用，敬请谅解。',
    time: '2025-05-05 10:00',
    isTop: false
  }
]

// 模拟数据 - 车辆
const vehicles = [
  {
    plateNumber: '粤B12345',
    brand: '本田',
    model: 'CR-V',
    color: '白色',
    status: '在场内'
  },
  {
    plateNumber: '粤A67890',
    brand: '丰田',
    model: '凯美瑞',
    color: '黑色',
    status: '未在场'
  }
]

// 模拟数据 - 停车记录
const parkingRecords = [
  {
    plateNumber: '粤B12345',
    entryTime: '2025-05-10 08:30',
    exitTime: '2025-05-10 12:45',
    duration: '4小时15分',
    fee: '¥15.00'
  },
  {
    plateNumber: '粤A67890',
    entryTime: '2025-05-09 14:00',
    exitTime: '2025-05-09 18:20',
    duration: '4小时20分',
    fee: '¥15.00'
  },
  {
    plateNumber: '粤B12345',
    entryTime: '2025-05-08 09:10',
    exitTime: '2025-05-08 17:30',
    duration: '8小时20分',
    fee: '¥25.00'
  }
]

// 初始化图表
const initParkingChart = () => {
  if (!parkingChartRef.value) return
  
  const chart = echarts.init(parkingChartRef.value)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      bottom: 0,
      data: ['已用车位', '可用车位']
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: parkingStats.usedSpaces, name: '已用车位', itemStyle: { color: '#f56c6c' } },
          { value: parkingStats.availableSpaces, name: '可用车位', itemStyle: { color: '#67c23a' } }
        ]
      }
    ]
  }
  
  chart.setOption(option)
  
  // 响应窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 组件挂载后初始化图表
onMounted(() => {
  initParkingChart()
})
</script>

<style scoped>
.user-dashboard {
  padding: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 欢迎卡片 */
.welcome-card {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #1e88e5, #1976d2);
  color: white;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-info {
  flex: 2;
}

.welcome-info h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.welcome-info p {
  font-size: 16px;
  margin-bottom: 20px;
  opacity: 0.8;
}

.welcome-actions {
  margin-top: 20px;
}

.welcome-image {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 150px;
}

.welcome-image img {
  max-width: 100%;
  height: auto;
}

/* 停车场统计卡片 */
.stats-card {
  margin-bottom: 20px;
  height: 380px;
}

.parking-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #606266;
}

.stat-value.available {
  color: #67c23a;
}

.stat-value.used {
  color: #f56c6c;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.chart-container {
  height: 200px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 公告卡片 */
.notice-card {
  margin-bottom: 20px;
  height: 380px;
}

.notice-list {
  max-height: 300px;
  overflow-y: auto;
}

.notice-item {
  border-bottom: 1px solid #ebeef5;
  padding: 10px 0;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.notice-title i {
  margin-right: 8px;
  color: #409eff;
}

.notice-title .el-tag {
  margin-left: 10px;
}

.notice-content {
  color: #606266;
  margin-bottom: 8px;
  line-height: 1.6;
  font-size: 14px;
}

.notice-footer {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 12px;
}

/* 车辆卡片 */
.vehicle-card {
  margin-bottom: 20px;
  height: 300px;
}

.vehicle-list {
  max-height: 220px;
  overflow-y: auto;
}

.vehicle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.vehicle-item:last-child {
  border-bottom: none;
}

.vehicle-info {
  display: flex;
  flex-direction: column;
}

.vehicle-plate {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.vehicle-details {
  font-size: 14px;
  color: #606266;
}

.vehicle-color {
  margin-left: 10px;
  color: #909399;
}

/* 停车记录卡片 */
.record-card {
  margin-bottom: 20px;
  height: 300px;
}

.record-list {
  max-height: 220px;
  overflow-y: auto;
}

/* 空数据提示 */
.empty-data {
  text-align: center;
  color: #909399;
  padding: 30px 0;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .welcome-content {
    flex-direction: column;
  }
  
  .welcome-image {
    display: none;
  }
  
  .parking-stats {
    flex-wrap: wrap;
  }
  
  .stat-item {
    width: 50%;
  }
}
</style> 